import React from 'react'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import http from '../../utils/http'
import styles from './index.module.css'
import { useNavigate } from 'react-router-dom'
function Index() {
  let navigate = useNavigate()
  const onFinish = async (values) => {
    // 连接登录接口
    const res = await http.post('/api/login', {
      username: values.username,
      password: values.password
    })

    console.log(res);

    let { code, data } = res.data

    if (code === 200) {
      // 用户信息和token存储在本地
      localStorage.setItem('token', data.token)
      localStorage.setItem('avatar', JSON.stringify(data.userInfo.avatar))
      localStorage.setItem('nickname', JSON.stringify(data.userInfo.nickname))
      localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
      // 登录成功后跳转页面
      navigate('/')
    }

  }
  return (
    <div>
      <Form
        onFinish={onFinish}
        layout='horizontal'
        footer={
          <div>
            <div>
              <Button block type='submit' size='large' className={styles.btn_wroe}>
                登录
              </Button>
            </div>
            <div className={styles.text_wroe}>
              <p>使用飞常准预订</p>
              <p>免账号出票</p>
            </div>
          </div>
        }
      >
        <div className={styles.box_wroe}>
          <h1>登录您的12306账号</h1>
          <b>
            友列高铁承诺保证您的账号及个人信息的安全,绝<br />不提供给任何第三方势力,绑定即视为同意《免责与隐<br />私申明》。
          </b>
        </div>
        <Form.Item
          name='username'
          rules={[{ required: true, message: '账号不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入账号' />
        </Form.Item>
        <Form.Item
          name='password'
          rules={[{ required: true, message: '密码不能为空' },
          { pattern: /^\w{6,12}$/, message: '密码格式不正确' }
          ]}
        >
          <Input onChange={console.log} placeholder='请输入密码' />
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
